Ext.namespace('Ext.ux.Wiz'); 
  
 /** 
  * Licensed under GNU LESSER GENERAL PUBLIC LICENSE Version 3 
  * 
  * @author Thorsten Suckow-Homberg <ts@siteartwork.de> 
  * @url http://www.siteartwork.de/wizardcomponent 
  */ 
  
 /** 
  * @class Ext.ux.Wiz.Header 
  * @extends Ext.BoxComponent 
  * 
  * A specific {@link Ext.BoxComponent} that can be used to show the current process in an 
  * {@link Ext.ux.Wiz}. 
  * 
  * An instance of this class is usually being created by {@link Ext.ux.Wiz#initPanels} using the 
  * {@link Ext.ux.Wiz#headerConfig}-object. 
  * 
  * @private 
  * @constructor 
  * @param {Object} config The config object 
  */ 
 Ext.ux.Wiz.Header = Ext.extend(Ext.BoxComponent, { 
  
     /** 
      * @cfg {Number} height The height of this component. Defaults to "55". 
      */ 
     height : 55, 
  
     /** 
      * @cfg {String} region The Region of this component. Since a {@link Ext.ux.Wiz} 
      * usually uses a {@link Ext.layout.BorderLayout}, this property defaults to 
      * "north". If you want to change this property, you should also change the appropriate 
      * css-classes that are used for this component. 
      */ 
     region : 'north', 
  
     /** 
      * @cfg {String} title The title that gets rendered in the head of the component. This 
      * should be a text describing the purpose of the wizard. 
      */ 
     title : null, 
  
     /** 
      * @cfg {Number} steps The overall number of steps the user has to go through 
      * to finish the wizard. 
      */ 
     steps : 0, 
  
     /** 
      * @cfg {String} stepText The text in the header indicating the current process in the wizard. 
      * (defaults to "Step {0} of {1}: {2}"). 
      * {0} is replaced with the index (+1) of the current card, {1} is replaced by the 
      * total number of cards in the wizard and {2} is replaced with the title-property of the 
      * {@link Ext.ux.Wiz.Card} 
      * @type String 
      */ 
     stepText : "", 
  
     /** 
      * @cfg {Object} autoEl The element markup used to render this component. 
      */ 
     autoEl : { 
         tag : 'div', 
         cls      : 'ext-ux-wiz-Header', 
         children : [{ 
             tag      : 'div', 
             cls      : 'ext-ux-wiz-Header-title' 
         }, { 
             tag  : 'div', 
             children : [{ 
                 tag : 'div', 
                 cls : 'ext-ux-wiz-Header-step' 
             }, { 
                 tag : 'div', 
                 cls : 'ext-ux-wiz-Header-stepIndicator-container' 
             }] 
         }] 
     }, 
  
     /** 
      * @param {Ext.Element} 
      */ 
     titleEl : null, 
  
     /** 
      * @param {Ext.Element} 
      */ 
     stepEl  : null, 
  
     /** 
      * @param {Ext.Element} 
      */ 
     imageContainer : null, 
  
     /** 
      * @param {Array} 
      */ 
     indicators : null, 
  
     /** 
      * @param {Ext.Template} 
      */ 
     stepTemplate : null, 
  
     /** 
      * @param {Number} lastActiveStep Stores the index of the last active card that 
      * was shown- 
      */ 
     lastActiveStep : -1, 
     
     wizardInfoOfCards: null,	//面板的提示信息
  
 // -------- helper 
     /** 
      * Gets called by  {@link Ext.ux.Wiz#onCardShow()} and updates the header 
      * with the approppriate information, such as the progress of the wizard 
      * (i.e. which card is being shown etc.) 
      * 
      * @param {Number} currentStep The index of the card currently shown in 
      * the wizard 
      * @param {String} title The title-property of the {@link Ext.ux.Wiz.Card} 
      * 
      * @private 
      */ 
     updateStep : function(currentStep, title) 
     { 
     	/*
         var html = this.stepTemplate.apply({ 
             0 : currentStep+1, 
             1 : this.steps, 
             2 : title 
         }); 
 
         this.stepEl.update(html);
          */
     	this.titleEl.update(this.wizardInfoOfCards[currentStep]);
  
         if (this.lastActiveStep != -1) { 
             this.indicators[this.lastActiveStep].removeClass('ext-ux-wiz-Header-stepIndicator-active'); 
         } 
  
         this.indicators[currentStep].addClass('ext-ux-wiz-Header-stepIndicator-active'); 
  
         this.lastActiveStep = currentStep; 
     }, 
  
  
 // -------- listener 
     /** 
      * Overrides parent implementation to render this component properly. 
      */ 
     onRender : function(ct, position) 
     { 
         Ext.ux.Wiz.Header.superclass.onRender.call(this, ct, position); 
  
         
         this.indicators   = []; 
         this.stepTemplate = new Ext.Template(this.stepText); 
         this.stepTemplate.compile(); 
  
         var el = this.el.dom.firstChild; 
         var ns = el.nextSibling; 
  
         this.titleEl        = new Ext.Element(el); 
         this.stepEl         = new Ext.Element(ns.firstChild); 
         this.imageContainer = new Ext.Element(ns.lastChild); 
   			
		this.titleEl.update(this.wizardInfoOfCards[0]);
		
         var image = null; 
         for (var i = 0, len = this.steps; i < len; i++) { 
             image = document.createElement('div'); 
             image.innerHTML = "&#160;"; 
             image.className = 'ext-ux-wiz-Header-stepIndicator'; 
             this.indicators[i] = new Ext.Element(image); 
             this.imageContainer.appendChild(image); 
         } 
         this.indicators[0].addClass('ext-ux-wiz-Header-stepIndicator-active')
     },
     setWizardInfoOfCards: function(wizardInfoOfCards){
     	this.wizardInfoOfCards = wizardInfoOfCards;
     }
 }); 
 